<template>
  <div>
    <!-- target(入口句柄) -->
    <Handle type="target" :position="Position.Left" />
    <!-- label -->
    <div class="vue-flow-node-custom-output">{{ label }}</div>
  </div>
</template>

<script setup>
import { Handle, Position } from '@vue-flow/core'
defineProps(['label', 'data'])
</script>

<style lang="scss">
// 自定义
// 输出
.vue-flow__node-custom-output {
  box-sizing: border-box;
  color: #fff;
  background: #222;
  border: 1px solid #222;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ccc;
  width: 50px;
  height: 25px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  --vf-handle: #222;
  --vf-node-color: none;
}
.vue-flow__node-custom-output.selected {
  border: 1px solid #aaa;
  box-shadow: none;
}
</style>
